<script lang="ts" setup>
import { ref } from 'vue';

const isShow = ref(false);
const ToggleShow = () => {
  isShow.value = !isShow.value;
}
</script>

<template>
<button @click="ToggleShow()">开关按钮</button>
<!-- 
    v-show 控制的标签，还会保留在页面中，值为 false 时只是被隐藏
    通过 style="display：none;"  不可见，不占位（类似鸿蒙的 Visibility.None）
  -->
<div class="box" v-show="isShow">v-show</div>
<!-- 
    v-if 控制的标签，值为 false 时，不会创建，已创建的也会被删除（类似鸿蒙的 if 条件渲染）
  -->
<div class="box" v-if="isShow">v-if</div>
</template>  

<style scoped>
.box{
  width: 200px;
  height: 100px;
  background-color: aqua;
  margin-top: 20px;
}
</style>